<template>
	<div class="login_register">
		<img class="bg" :src="loginBackground" v-if="!!loginBackground" />
		<div class="header"><img :src="logoUrlPath" v-if="!!logoUrlPath" /></div>
		<el-scrollbar>
			<h2>{{ siteInfo?.webName }}</h2>
			<div class="login_register_body">
				<slot :data="siteInfo"></slot>
			</div>
		</el-scrollbar>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	computed: {
		...mapGetters(['siteInfo']),
		logoUrlPath() {
			if (!this.siteInfo?.logo) {
				return '';
			} else {
				return `${this.siteInfo.logo}`;
			}
		},
		loginBackground() {
			if (!this.siteInfo?.LOGIN_BG) {
				return '';
			} else {
				return `${this.siteInfo.LOGIN_BG}`;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.login_register::v-deep {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	img.bg {
		position: absolute;
		top: 100px;
		left: 0;
		width: 100%;
		height: calc(100% - 100px);
		z-index: 1;
		object-fit: cover;
		background-color: #f2f6fc;
	}
	.header {
		display: flex;
		align-items: center;
		height: 100px;
		padding: 25px 4.275%;
		box-sizing: border-box;
		background-color: var(--primary);
		position: relative;
		z-index: 2;
		img {
			width: auto;
			height: 48px;
		}
	}
	.el-scrollbar {
		height: calc(100vh - 100px);
		position: relative;
		z-index: 2;
		h2 {
			flex-shrink: 0;
			font-size: 32px;
			line-height: 1;
			margin-bottom: 32px;
			text-align: center;
			color: var(--primary);
			text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
		}
	}
	.el-scrollbar__wrap {
		overflow-x: hidden;
	}
	.el-scrollbar__view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
		padding: 32px 16px;
		min-height: 100%;
	}
}
.login_register_body::v-deep {
	.el-form {
		position: relative;
		z-index: 2;
		width: 100%;
		max-width: 640px;
		margin: 0 auto 7%;
		border-radius: 10px;
		padding: 23px 23px 1px;
		background-color: #fff;
		box-sizing: border-box;
	}
	.el-form-item__label {
		float: none;
		display: block;
		line-height: 1;
		text-align: left;
		margin-bottom: 10px;
	}
	.el-form-item__content {
		display: flex;
		align-items: center;
		min-height: 36px;
	}
	.el-input.el-input--prefix .el-input__icon {
		line-height: 1;
	}
	.el-input.el-input--suffix .el-input__icon {
		line-height: 1;
	}
	.el-form-item.link .el-form-item__content {
		line-height: 24px;
		min-height: auto;
		font-size: 15px;
		color: #606266;
	}
	.el-form-item.button .el-button {
		width: 100%;
		height: 48px;
		font-size: 18px;
	}
	.el-form-item.image-code img.code {
		flex-shrink: 0;
		margin-left: 10px;
		border-radius: 4px;
	}
	.el-input__suffix {
		display: flex;
		align-items: center;
	}
}
@media (min-width: 768px) {
	.login_register::v-deep {
		.el-scrollbar h2 {
			font-size: 40px;
		}
	}
	.login_register_body::v-deep {
		.el-form {
			padding: 32px 32px 10px;
		}
		.el-form-item {
			margin-bottom: 25px;
		}
		.el-form-item__label {
			font-size: 15px;
		}
		.el-form-item__content {
			min-height: 44px;
			line-height: 44px;
		}
		.el-input.el-input--prefix {
			.el-input__prefix {
				left: 7px;
			}
			.el-input__inner {
				padding-left: 34px;
			}
			.el-input__icon {
				font-size: 16px;
			}
		}
		.el-input.el-input--suffix {
			.el-input__suffix {
				right: 7px;
			}
			.el-input__inner {
				padding-right: 34px;
			}
			.el-input__icon {
				font-size: 16px;
			}
		}
		.el-input__inner {
			font-size: 16px;
			height: 44px;
		}
		.el-form-item.button .el-button {
			height: 56px;
			font-size: 22px;
		}
		.el-form-item.image-code img.code {
			height: 44px;
		}
	}
}

@media (min-width: 992px) {
	.login_register::v-deep {
		.el-scrollbar h2 {
			font-size: 48px;
		}
	}
	.login_register_body::v-deep {
		.el-form {
			padding: 48px 48px 26px;
		}
		.el-form-item {
			margin-bottom: 28px;
		}
		.el-form-item__label {
			font-size: 16px;
		}
		.el-form-item__content {
			min-height: 48px;
			line-height: 48px;
		}
		.el-input.el-input--prefix {
			.el-input__prefix {
				left: 9px;
			}
			.el-input__inner {
				padding-left: 39px;
			}
			.el-input__icon {
				font-size: 18px;
			}
		}
		.el-input.el-input--suffix {
			.el-input__suffix {
				right: 9px;
			}
			.el-input__inner {
				padding-right: 39px;
			}
			.el-input__icon {
				font-size: 18px;
			}
		}
		.el-input__inner {
			font-size: 16px;
			height: 48px;
		}
		.el-form-item.button .el-button {
			height: 48px;
			font-size: 22px;
		}
		.el-form-item.image-code img.code {
			height: 48px;
		}
	}
}
</style>
